<template>
  <div class="sidebar">
    <div class="project-name"><img src="../assets/car.png" />管理后台</div>
    <div>
      <el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        background-color="#324157"
        text-color="#bfcbd9"
        active-text-color="#20a0ff"
        router
      >
        <el-menu-item :index="item.index" v-for="item in items">
          <template #title>
               <SvgIcon style="margin-right:5px" :name="item.icon"></SvgIcon>
              {{ item.title }}</template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { useRoute } from "vue-router";

const items = [
  {
    icon: "el-icon-lx-cascades",
    index: "/sys/order",
    icon:"order",
    title: "预约订单",
  },
  {
    icon: "el-icon-lx-cascades",
    index: "/sys/car",
    icon:"car",
    title: "车辆信息",
  },
  {
    icon: "el-icon-lx-home",
    index: "/sys/move",
    icon:"move",
    title: "搬家参数",
  },
  {
    icon: "el-icon-lx-home",
    index: "/sys/user",
    title: "用户管理",
    icon:"user",
  },
   
];

const route = useRoute();
const onRoutes = computed(() => {
  return route.path;
});
</script>

<style scoped lang="less">
.sidebar {
  background-color: #324157;
  height: 100vh;
  box-sizing: border-box;
  //   padding: 10px;
  .project-name {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 20px;
    color: #fff;
    padding: 10px 20px;

    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }

  &::-webkit-scrollbar {
    width: 0;
  }
  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 100%;
    border-right:0 !important
  }
  & > ul {
    height: 100%;
  }
}
</style>
